<!--
 * @Author: wangshuguang
 * @Date: 2022-02-17 10:49:37
 * @LastEditTime: 2022-03-23 15:26:17
 * @LastEditors: wangshuguang
 * @Description:  商户流量余额记录
-->
<template>
  <div class="common-container">
    <el-form ref="filterForm" :model="listQuery" class="demo-form-inline" label-width="100px">
      <el-row>
        <el-col :span="12">
          <el-form-item label="业务单号" prop="businessNo">
            <el-input v-model="listQuery.businessNo" clearable placeholder="请输入" size="small" class="width100" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="业务类型" prop="businessType">
            <el-select v-model="listQuery.businessType" clearable placeholder="请选择" size="small" class="width100">
              <el-option label="全部" value="" />
              <el-option label="购买流量余额" value="1" />
              <el-option label="套餐自动续费" value="2" />
              <el-option label="套餐外标准资费" value="3" />
              <el-option label="购买套餐" value="4" />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="交易时间" prop="date">
            <el-date-picker
              v-model="listQuery.date"
              size="small"
              class="width100"
              type="daterange"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
            />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="状态" prop="rechargeStatus">
            <el-select v-model="listQuery.rechargeStatus" clearable placeholder="请选择" size="small" class="width100">
              <el-option label="全部" value="" />
              <el-option label="交易中" value="W" />
              <el-option label="交易失败" value="F" />
              <el-option label="交易成功" value="S" />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item>
            <el-button type="primary" round size="small" @click="searchFun()">查询</el-button>
            <el-button type="primary" round size="small" @click="resetForm('filterForm')">重置</el-button>
            <el-button type="text" round size="small" @click="downFile">导出excel</el-button>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <el-table size="medium" :data="list" border>
      <el-table-column type="index" width="50" />
      <el-table-column prop="businessNo" align="center" label="业务单号" />
      <el-table-column prop="businessTypeZh" align="center" label="业务类型" />
      <el-table-column prop="name" align="center" label="流量余额（-/+）">
        <template slot-scope="scope">
          <span>{{ scope.row.symbolFlowBalance + scope.row.flowBalance }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="rechargeStatusZh" align="center" label="状态" />
      <el-table-column prop="remark" align="center" label="备注" />
      <el-table-column prop="createTime" align="center" label="交易时间">
        <template slot-scope="scope">
          <span>{{ $dateFtt('yyyy-MM-dd hh:mm', new Date(scope.row.updateTime)) }}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" label="操作">
        <template slot-scope="scope">
          <el-button size="small" type="text" @click="viewData(scope.row)">详情</el-button>
        </template>
      </el-table-column>
    </el-table>

    <div class="pagination-container">
      <el-pagination
        :current-page.sync="listQuery.pageNum"
        :page-size="listQuery.pageSize"
        :total="total"
        layout="total, prev, pager, next"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
    <el-drawer
      :title="infoConfig.title"
      :visible.sync="infoVisible"
      append-to-body
      size="50%"
      direction="rtl"
    >
      <BusinessFlowHisInfo v-if="infoVisible" :info-config="infoConfig" />
    </el-drawer>
  </div>
</template>

<script>
import { merchantFlowRecordList, exportMerchantFlows } from '@/api/business'
import BusinessFlowHisInfo from './components/BusinessFlowHisInfo.vue'
import { mapGetters } from 'vuex'
import { dateFtt } from '@/utils'

export default {
  components: { BusinessFlowHisInfo },
  data() {
    return {
      infoVisible: false,
      infoConfig: {
        title: '',
        data: {}
      },
      form: {},
      scope: 0,
      total: 0,
      statusOptions: ['停用', '正常'],
      listQuery: {
        pageNum: 1,
        pageSize: 10,
        businessNo: '',
        businessType: '',
        date: [],
        rechargeStatus: ''
      },
      list: []
    }
  },
  computed: {
    ...mapGetters(['businessInfo'])
  },
  mounted() {
    this.fetchData()
  },
  methods: {
    // 重置
    resetForm(formName) {
      this.$refs[formName].resetFields()
    },
    downFile() {
      const params = {
        ...this.listQuery,
        merchantId: this.businessInfo.syncTmpMerchantId
      }

      if (params.date && params.date.length) {
        params.updateTimeBegin = dateFtt('yyyy-MM-dd 00:00:00', params.date[0])
        params.updateTimeEnd = dateFtt('yyyy-MM-dd 23:59:59', params.date[1])
        delete params.date
      }
      exportMerchantFlows(params).then(res => {
        console.log('res', res)
        if (res.code === 0) {
          this.$alert(
            '数据导出中，请稍后到数据下载中心进行下载',
            '提示',
            {
              confirmButtonText: '确定',
              center: true,
              type: 'success',
              callback: action => {}
            }
          )
        }
      })
    },
    viewData(data) {
      this.infoConfig = {
        type: 'detail',
        title: '详情',
        data
      }
      this.infoVisible = true
    },
    searchFun() {
      this.listQuery.pageNum = 1
      this.fetchData()
    },
    fetchData() {
      const params = {
        ...this.listQuery,
        merchantId: this.businessInfo.syncTmpMerchantId
      }

      if (params.date && params.date.length) {
        params.updateTimeBegin = dateFtt('yyyy-MM-dd 00:00:00', params.date[0])
        params.updateTimeEnd = dateFtt('yyyy-MM-dd 23:59:59', params.date[1])
        delete params.date
      }
      merchantFlowRecordList(params).then(res => {
        if (res.code === 0) {
          this.list = res.data.list
          this.total = res.data.total
        }
      })
    },
    toRolesName(roles) {
      const rolesNames = []
      for (let i = 0; i < roles.length; i++) {
        rolesNames.push(roles[i].name)
      }
      return rolesNames.join(',')
    },
    handleEdit(user) {
      this.$refs.userDialog.openEdit(user.id).then(() => {
        this.fetchData()
      })
    },

    handleFilter() {
      this.fetchData()
    },
    handleSizeChange(val) {
      this.listQuery.pageSize = val
      this.fetchData()
    },
    handleCurrentChange(val) {
      this.listQuery.pageNum = val
      this.fetchData()
    },
    handleResetPassword(user) {
      this.$refs.resetPw.open(user.id)
    }
  }
}
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
// .search-container {
// 	margin-top: 20px;
// 	margin-bottom: 20px;
// }

// .search-wrap {
// 	width: 300px;
// 	margin-right: 10px;
// }
</style>

